<template>
  <div class="task-container">
    <!-- 顶部概览 -->
    <div class="task-header">
      <div class="header-content">
        <div class="header-left">
          <h1>学习任务</h1>
          <p>制定学习计划，跟踪学习进度，养成良好学习习惯</p>
        </div>

        <div class="header-stats">
          <div class="stat-card">
            <div class="stat-icon today">
              <el-icon><Calendar /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ todayStats.completed }}/{{ todayStats.total }}</div>
              <div class="stat-label">今日任务</div>
            </div>
          </div>

          <div class="stat-card">
            <div class="stat-icon week">
              <el-icon><TrendCharts /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ weekStats.completionRate }}%</div>
              <div class="stat-label">本周完成率</div>
            </div>
          </div>

          <div class="stat-card">
            <div class="stat-icon streak">
              <el-icon><Trophy /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ streakDays }}</div>
              <div class="stat-label">连续天数</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 快速操作 -->
    <div class="quick-actions">
      <div class="actions-content">
        <el-button type="primary" @click="createTask">
          <el-icon><Plus /></el-icon>
          创建任务
        </el-button>
        <el-button @click="createPlan">
          <el-icon><Document /></el-icon>
          制定计划
        </el-button>
        <el-button @click="viewCalendar">
          <el-icon><Calendar /></el-icon>
          学习日历
        </el-button>
        <el-button @click="viewStats">
          <el-icon><DataAnalysis /></el-icon>
          学习统计
        </el-button>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="task-main">
      <!-- 左侧：任务列表 -->
      <div class="task-left">
        <!-- 筛选标签 -->
        <div class="filter-tabs">
          <div
            v-for="filter in taskFilters"
            :key="filter.key"
            class="filter-tab"
            :class="{ active: activeFilter === filter.key }"
            @click="activeFilter = filter.key"
          >
            <el-icon><component :is="filter.icon" /></el-icon>
            <span>{{ filter.label }}</span>
            <el-badge
              v-if="filter.count > 0"
              :value="filter.count"
              class="filter-badge"
            />
          </div>
        </div>

        <!-- 任务列表 -->
        <div class="task-list">
          <div class="list-header">
            <h3>{{ getFilterTitle() }}</h3>
            <div class="list-actions">
              <el-select v-model="sortBy" size="small" style="width: 120px">
                <el-option label="创建时间" value="created" />
                <el-option label="截止时间" value="deadline" />
                <el-option label="优先级" value="priority" />
                <el-option label="完成状态" value="status" />
              </el-select>
            </div>
          </div>

          <div class="task-items">
            <div
              v-for="task in filteredTasks"
              :key="task.id"
              class="task-item"
              :class="getTaskItemClass(task)"
              @click="viewTaskDetail(task)"
            >
              <div class="task-checkbox">
                <el-checkbox
                  v-model="task.completed"
                  @change="toggleTaskStatus(task)"
                  @click.stop
                />
              </div>

              <div class="task-content">
                <div class="task-title">{{ task.title }}</div>
                <div class="task-meta">
                  <span class="task-type">{{ getTaskTypeText(task.type) }}</span>
                  <span class="task-duration">{{ task.estimatedTime }}分钟</span>
                  <span v-if="task.deadline" class="task-deadline">
                    {{ formatDeadline(task.deadline) }}
                  </span>
                </div>
                <div v-if="task.description" class="task-description">
                  {{ task.description }}
                </div>

                <!-- 任务进度 -->
                <div v-if="task.progress !== undefined" class="task-progress">
                  <el-progress
                    :percentage="task.progress"
                    :show-text="false"
                    :stroke-width="4"
                  />
                  <span class="progress-text">{{ task.progress }}%</span>
                </div>
              </div>

              <div class="task-actions">
                <el-tag
                  :type="getPriorityType(task.priority)"
                  size="small"
                >
                  {{ getPriorityText(task.priority) }}
                </el-tag>

                <el-dropdown @command="handleTaskAction">
                  <el-button circle size="small">
                    <el-icon><MoreFilled /></el-icon>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item :command="`edit-${task.id}`">
                        编辑任务
                      </el-dropdown-item>
                      <el-dropdown-item :command="`duplicate-${task.id}`">
                        复制任务
                      </el-dropdown-item>
                      <el-dropdown-item :command="`delete-${task.id}`" divided>
                        删除任务
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
          </div>

          <!-- 空状态 -->
          <div v-if="filteredTasks.length === 0" class="empty-state">
            <el-empty :description="getEmptyDescription()">
              <el-button type="primary" @click="createTask">
                创建第一个任务
              </el-button>
            </el-empty>
          </div>
        </div>
      </div>

      <!-- 右侧：学习计划和统计 -->
      <div class="task-right">
        <!-- 今日计划 -->
        <div class="today-plan">
          <div class="plan-header">
            <h3>今日计划</h3>
            <div class="plan-progress">
              <el-progress
                type="circle"
                :percentage="todayProgress"
                :width="60"
                :stroke-width="6"
              />
            </div>
          </div>

          <div class="plan-content">
            <div class="plan-summary">
              <div class="summary-item">
                <span class="label">计划学习</span>
                <span class="value">{{ todayPlan.totalTime }}分钟</span>
              </div>
              <div class="summary-item">
                <span class="label">已完成</span>
                <span class="value">{{ todayPlan.completedTime }}分钟</span>
              </div>
              <div class="summary-item">
                <span class="label">剩余任务</span>
                <span class="value">{{ todayPlan.remainingTasks }}个</span>
              </div>
            </div>

            <div class="plan-timeline">
              <div
                v-for="item in todayTimeline"
                :key="item.id"
                class="timeline-item"
                :class="{ completed: item.completed }"
              >
                <div class="timeline-time">{{ item.time }}</div>
                <div class="timeline-content">
                  <div class="timeline-title">{{ item.title }}</div>
                  <div class="timeline-type">{{ item.type }}</div>
                </div>
                <div class="timeline-status">
                  <el-icon v-if="item.completed" class="completed-icon">
                    <CircleCheck />
                  </el-icon>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 学习统计 -->
        <div class="learning-stats">
          <div class="stats-header">
            <h3>学习统计</h3>
            <el-select v-model="statsRange" size="small" style="width: 100px">
              <el-option label="本周" value="week" />
              <el-option label="本月" value="month" />
              <el-option label="本年" value="year" />
            </el-select>
          </div>

          <div class="stats-content">
            <div class="stats-chart">
              <!-- 这里可以集成图表库显示学习统计 -->
              <div class="chart-placeholder">
                <el-icon class="chart-icon"><TrendCharts /></el-icon>
                <p>学习时长趋势图</p>
              </div>
            </div>

            <div class="stats-summary">
              <div class="summary-row">
                <span class="label">总学习时长</span>
                <span class="value">{{ learningStats.totalTime }}小时</span>
              </div>
              <div class="summary-row">
                <span class="label">完成任务数</span>
                <span class="value">{{ learningStats.completedTasks }}个</span>
              </div>
              <div class="summary-row">
                <span class="label">平均每日</span>
                <span class="value">{{ learningStats.dailyAverage }}分钟</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 学习目标 -->
        <div class="learning-goals">
          <div class="goals-header">
            <h3>学习目标</h3>
            <el-button text @click="editGoals">编辑</el-button>
          </div>

          <div class="goals-content">
            <div
              v-for="goal in learningGoals"
              :key="goal.id"
              class="goal-item"
            >
              <div class="goal-info">
                <div class="goal-title">{{ goal.title }}</div>
                <div class="goal-progress">
                  <el-progress
                    :percentage="goal.progress"
                    :show-text="false"
                    :stroke-width="4"
                  />
                  <span class="progress-text">{{ goal.progress }}%</span>
                </div>
              </div>
              <div class="goal-target">
                <span class="current">{{ goal.current }}</span>
                <span class="separator">/</span>
                <span class="target">{{ goal.target }}</span>
                <span class="unit">{{ goal.unit }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  Calendar, TrendCharts, Trophy, Plus, Document, DataAnalysis,
  MoreFilled, CircleCheck
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()

// 响应式数据
const activeFilter = ref('today')
const sortBy = ref('created')
const statsRange = ref('week')

// 今日统计
const todayStats = ref({
  completed: 5,
  total: 8
})

// 本周统计
const weekStats = ref({
  completionRate: 78
})

// 连续学习天数
const streakDays = ref(12)

// 今日进度
const todayProgress = computed(() => {
  return Math.round((todayStats.value.completed / todayStats.value.total) * 100)
})

// 今日计划
const todayPlan = ref({
  totalTime: 180,
  completedTime: 120,
  remainingTasks: 3
})

// 今日时间线
const todayTimeline = ref([
  {
    id: 1,
    time: '09:00',
    title: 'Vue3组件开发',
    type: '视频学习',
    completed: true
  },
  {
    id: 2,
    time: '10:30',
    title: 'JavaScript练习题',
    type: '编程练习',
    completed: true
  },
  {
    id: 3,
    time: '14:00',
    title: 'React Hooks复习',
    type: '知识复习',
    completed: false
  },
  {
    id: 4,
    time: '16:00',
    title: '项目实战练习',
    type: '项目实践',
    completed: false
  }
])

// 学习统计
const learningStats = ref({
  totalTime: 45.5,
  completedTasks: 28,
  dailyAverage: 65
})

// 学习目标
const learningGoals = ref([
  {
    id: 1,
    title: '每日学习时长',
    current: 120,
    target: 180,
    unit: '分钟',
    progress: 67
  },
  {
    id: 2,
    title: '本月完成课程',
    current: 3,
    target: 5,
    unit: '门',
    progress: 60
  },
  {
    id: 3,
    title: '编程练习题',
    current: 45,
    target: 100,
    unit: '题',
    progress: 45
  }
])

// 任务筛选器
const taskFilters = ref([
  { key: 'today', label: '今日任务', icon: 'Calendar', count: 8 },
  { key: 'pending', label: '待完成', icon: 'Clock', count: 15 },
  { key: 'completed', label: '已完成', icon: 'CircleCheck', count: 28 },
  { key: 'overdue', label: '已逾期', icon: 'Warning', count: 2 },
  { key: 'all', label: '全部任务', icon: 'Document', count: 53 }
])

// 任务列表
const tasks = ref([
  {
    id: 1,
    title: '完成Vue3组件开发章节',
    description: '学习Vue3组合式API和组件通信',
    type: 'video',
    priority: 'high',
    estimatedTime: 45,
    deadline: new Date('2024-01-20 18:00:00'),
    completed: false,
    progress: 75,
    category: 'today'
  },
  {
    id: 2,
    title: '练习JavaScript算法题',
    description: '完成数组和字符串相关的10道练习题',
    type: 'coding',
    priority: 'medium',
    estimatedTime: 60,
    deadline: new Date('2024-01-21 20:00:00'),
    completed: true,
    progress: 100,
    category: 'completed'
  },
  {
    id: 3,
    title: '复习CSS布局知识点',
    description: '回顾Flexbox和Grid布局的使用方法',
    type: 'review',
    priority: 'low',
    estimatedTime: 30,
    deadline: new Date('2024-01-19 16:00:00'),
    completed: false,
    progress: 0,
    category: 'overdue'
  },
  {
    id: 4,
    title: '阅读React官方文档',
    description: '深入了解React Hooks的最佳实践',
    type: 'reading',
    priority: 'medium',
    estimatedTime: 90,
    deadline: new Date('2024-01-22 19:00:00'),
    completed: false,
    progress: 25,
    category: 'pending'
  },
  {
    id: 5,
    title: '完成项目实战作业',
    description: '使用Vue3构建一个待办事项应用',
    type: 'project',
    priority: 'high',
    estimatedTime: 120,
    deadline: new Date('2024-01-25 23:59:00'),
    completed: false,
    progress: 10,
    category: 'pending'
  }
])

// 计算属性
const filteredTasks = computed(() => {
  let filtered = tasks.value

  // 根据筛选器过滤
  switch (activeFilter.value) {
    case 'today':
      const today = new Date().toDateString()
      filtered = filtered.filter(task => {
        const taskDate = new Date(task.deadline).toDateString()
        return taskDate === today || task.category === 'today'
      })
      break
    case 'pending':
      filtered = filtered.filter(task => !task.completed && !isOverdue(task))
      break
    case 'completed':
      filtered = filtered.filter(task => task.completed)
      break
    case 'overdue':
      filtered = filtered.filter(task => !task.completed && isOverdue(task))
      break
    case 'all':
    default:
      // 显示所有任务
      break
  }

  // 排序
  switch (sortBy.value) {
    case 'deadline':
      filtered.sort((a, b) => new Date(a.deadline) - new Date(b.deadline))
      break
    case 'priority':
      const priorityOrder = { high: 3, medium: 2, low: 1 }
      filtered.sort((a, b) => priorityOrder[b.priority] - priorityOrder[a.priority])
      break
    case 'status':
      filtered.sort((a, b) => a.completed - b.completed)
      break
    default: // created
      filtered.sort((a, b) => b.id - a.id)
  }

  return filtered
})

// 方法
const isOverdue = (task) => {
  return new Date() > new Date(task.deadline)
}

const getFilterTitle = () => {
  const filter = taskFilters.value.find(f => f.key === activeFilter.value)
  return filter ? filter.label : '任务列表'
}

const getTaskItemClass = (task) => {
  return {
    'task-completed': task.completed,
    'task-overdue': !task.completed && isOverdue(task),
    'task-high-priority': task.priority === 'high'
  }
}

const getTaskTypeText = (type) => {
  const typeMap = {
    video: '视频学习',
    coding: '编程练习',
    review: '知识复习',
    reading: '阅读学习',
    project: '项目实践'
  }
  return typeMap[type] || type
}

const getPriorityType = (priority) => {
  const typeMap = {
    high: 'danger',
    medium: 'warning',
    low: 'info'
  }
  return typeMap[priority] || ''
}

const getPriorityText = (priority) => {
  const textMap = {
    high: '高优先级',
    medium: '中优先级',
    low: '低优先级'
  }
  return textMap[priority] || priority
}

const formatDeadline = (deadline) => {
  const now = new Date()
  const deadlineDate = new Date(deadline)
  const diff = deadlineDate - now

  if (diff < 0) {
    return '已逾期'
  }

  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))

  if (days > 0) {
    return `${days}天后截止`
  } else if (hours > 0) {
    return `${hours}小时后截止`
  } else {
    return '即将截止'
  }
}

const getEmptyDescription = () => {
  const descriptions = {
    today: '今天还没有安排任务',
    pending: '没有待完成的任务',
    completed: '还没有完成任何任务',
    overdue: '没有逾期的任务',
    all: '还没有创建任何任务'
  }
  return descriptions[activeFilter.value] || '暂无任务'
}

// 事件处理
const createTask = () => {
  router.push('/task/create')
}

const createPlan = () => {
  router.push('/task/plan')
}

const viewCalendar = () => {
  router.push('/task/calendar')
}

const viewStats = () => {
  router.push('/task/stats')
}

const viewTaskDetail = (task) => {
  router.push(`/task/detail/${task.id}`)
}

const toggleTaskStatus = (task) => {
  task.completed = !task.completed
  if (task.completed) {
    task.progress = 100
    ElMessage.success('任务已完成！')
  } else {
    ElMessage.info('任务已标记为未完成')
  }
}

const handleTaskAction = (command) => {
  const [action, taskId] = command.split('-')
  const task = tasks.value.find(t => t.id === parseInt(taskId))

  switch (action) {
    case 'edit':
      router.push(`/task/edit/${taskId}`)
      break
    case 'duplicate':
      // 复制任务逻辑
      ElMessage.success('任务已复制')
      break
    case 'delete':
      ElMessageBox.confirm('确定要删除这个任务吗？', '删除任务', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const index = tasks.value.findIndex(t => t.id === parseInt(taskId))
        if (index > -1) {
          tasks.value.splice(index, 1)
          ElMessage.success('任务已删除')
        }
      }).catch(() => {
        // 用户取消
      })
      break
  }
}

const editGoals = () => {
  router.push('/task/goals')
}

onMounted(() => {
  // 初始化数据
})
</script>

<style lang="scss" scoped>
.task-container {
  min-height: 100vh;
  background: var(--el-bg-color-page);
}

.task-header {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  color: white;
  padding: 40px 0;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 30px;
  }
}

.header-left {
  h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 12px;
  }

  p {
    font-size: 1.1rem;
    opacity: 0.9;
  }
}

.header-stats {
  display: flex;
  gap: 24px;

  @media (max-width: 768px) {
    justify-content: center;
  }
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.1);
  padding: 16px 20px;
  border-radius: 12px;
  backdrop-filter: blur(10px);

  .stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    .el-icon {
      font-size: 20px;
    }

    &.today {
      background: rgba(255, 255, 255, 0.2);
    }

    &.week {
      background: rgba(255, 255, 255, 0.2);
    }

    &.streak {
      background: rgba(255, 255, 255, 0.2);
    }
  }

  .stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 2px;
  }

  .stat-label {
    font-size: 0.85rem;
    opacity: 0.8;
  }
}

.quick-actions {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.actions-content {
  display: flex;
  gap: 12px;

  @media (max-width: 768px) {
    flex-wrap: wrap;
  }
}

.task-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 40px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;

  @media (max-width: 1024px) {
    grid-template-columns: 1fr;
  }
}

.filter-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.filter-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: white;
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;

  &:hover {
    border-color: var(--el-color-primary);
    color: var(--el-color-primary);
  }

  &.active {
    background: var(--el-color-primary);
    color: white;
    border-color: var(--el-color-primary);
  }

  .filter-badge {
    margin-left: 4px;
  }
}

.task-list {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--el-text-color-primary);
  }
}

.task-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    border-color: var(--el-color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  &.task-completed {
    opacity: 0.7;

    .task-title {
      text-decoration: line-through;
    }
  }

  &.task-overdue {
    border-left: 4px solid var(--el-color-danger);
  }

  &.task-high-priority {
    border-left: 4px solid var(--el-color-warning);
  }
}

.task-content {
  flex: 1;
  min-width: 0;
}

.task-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--el-text-color-primary);
  margin-bottom: 6px;
}

.task-meta {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--el-text-color-secondary);

  .task-type {
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
    padding: 2px 6px;
    border-radius: 4px;
  }

  .task-deadline {
    color: var(--el-color-warning);
  }
}

.task-description {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  margin-bottom: 8px;
  line-height: 1.4;
}

.task-progress {
  display: flex;
  align-items: center;
  gap: 8px;

  .el-progress {
    flex: 1;
  }

  .progress-text {
    font-size: 12px;
    color: var(--el-color-primary);
    font-weight: 500;
  }
}

.task-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
}

.today-plan {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  margin-bottom: 20px;
}

.plan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--el-text-color-primary);
  }
}

.plan-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;

  .summary-item {
    display: flex;
    justify-content: space-between;
    font-size: 14px;

    .label {
      color: var(--el-text-color-secondary);
    }

    .value {
      color: var(--el-text-color-primary);
      font-weight: 500;
    }
  }
}

.plan-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.timeline-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 6px;
  transition: background 0.3s ease;

  &:hover {
    background: var(--el-fill-color-extra-light);
  }

  &.completed {
    opacity: 0.7;

    .timeline-title {
      text-decoration: line-through;
    }
  }
}

.timeline-time {
  font-size: 12px;
  color: var(--el-text-color-placeholder);
  width: 40px;
  flex-shrink: 0;
}

.timeline-content {
  flex: 1;

  .timeline-title {
    font-size: 14px;
    color: var(--el-text-color-primary);
    margin-bottom: 2px;
  }

  .timeline-type {
    font-size: 12px;
    color: var(--el-text-color-secondary);
  }
}

.timeline-status {
  .completed-icon {
    color: var(--el-color-success);
    font-size: 16px;
  }
}

.learning-stats {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  margin-bottom: 20px;
}

.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--el-text-color-primary);
  }
}

.chart-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 120px;
  background: var(--el-fill-color-extra-light);
  border-radius: 8px;
  margin-bottom: 16px;

  .chart-icon {
    font-size: 32px;
    color: var(--el-text-color-placeholder);
    margin-bottom: 8px;
  }

  p {
    font-size: 14px;
    color: var(--el-text-color-placeholder);
    margin: 0;
  }
}

.stats-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;

  .summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;

    .label {
      color: var(--el-text-color-secondary);
    }

    .value {
      color: var(--el-text-color-primary);
      font-weight: 500;
    }
  }
}

.learning-goals {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.goals-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--el-text-color-primary);
  }
}

.goals-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.goal-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.goal-info {
  flex: 1;

  .goal-title {
    font-size: 14px;
    color: var(--el-text-color-primary);
    margin-bottom: 8px;
  }

  .goal-progress {
    display: flex;
    align-items: center;
    gap: 8px;

    .el-progress {
      flex: 1;
    }

    .progress-text {
      font-size: 12px;
      color: var(--el-color-primary);
      font-weight: 500;
    }
  }
}

.goal-target {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  white-space: nowrap;

  .current {
    color: var(--el-color-primary);
    font-weight: 600;
  }

  .separator {
    margin: 0 4px;
  }

  .target {
    font-weight: 500;
  }

  .unit {
    margin-left: 2px;
  }
}
</style>